<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="/static/index/cardList.css">
		<link rel="stylesheet" href="/static/index/swiper8/swiper-bundle.css">
		<script src="/static/index/swiper8/swiper-bundle.min.js"></script>
		<script src="/static/index/js/jquery-3.6.0.min.js"></script>
		<!-- 引入动画 -->
		<link rel="stylesheet" href="/static/index/AOS-animations/aos.css">
		<script src="/static/index/AOS-animations/aos.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- PC端导航栏开始 -->
			<div class="nav">
				<div class="navLogo"><img src="/static/index/img/logoTop.png" alt=""></div>
				<div class="navText">
					<ul>
						{foreach name="nav" item="v"}
						<a href="hongguan/{$v.url}">
							<li>{$v.title}</li>
						</a>
						{/foreach}
					</ul>
				</div>
				<div class="placeholder"></div>
			</div>
			<div class="banner" data-aos="fade-right">
				<div class="swiper">
					<div class="swiper-wrapper">
						{foreach name="banner" item="v"}
						<div class="swiper-slide">
							<img src="{$v.image}"  alt="">
						</div>
						{/foreach}
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="introAll">
				<div class="introductionNav">
					<div class="introductionNavAll">
						<div class="introductionNavAllTop">
							<p>快速导航</p>
							<p>Quick navgation</p>
						</div>
						<div class="introductionNavAllBottom">
							<p>红馆简介</p>
						</div>
					</div>
				</div>
			</div>
			<div class="introduction">
				<div class="introductionMore">
					<div class="jianjie">
						<div class="introductionMoreTop">
							<div class="introductionMoreTopText">
								<div class="moreList">
									<img src="/static/index/img/fanren.png" alt="">
								</div>
								<p>红馆简介</p>
							</div>
							<div class="introductionMoreTopMain">
								<form action="">
									<ul>
										<li>当前位置： 首页|红馆简介</li>
										<li><input type="text" name="keyword" style="width: 90%"></li>
										<input type="image" src="/static/index/img/serch.png" style="width: 1.5rem;margin-top: .5rem" />
									</ul>
								</form>
							</div>
						</div>
						<div class="clover">
							<img id="listCard" src="/static/index/img/firstXuanzhong.png" alt="">
							<img id="listPictrue" src="/static/index/img/secondWeixuanzhpng.png" alt="">
							<img id="listText" src="/static/index/img/thirdWeixuanzhong.png" alt="">
						</div>



						<div class="show">
							<div class="introductionMain">
								{foreach name="social" item="v"}
								<div class="introductionMainBox">
									<img src="{$v.image}" alt="">
									<p>{$v.title}</p>
									<p><img src="/static/index/img/zhong.png" alt="">{$v.createtime}</p>
								</div>
								{/foreach}
							</div>
						</div>


						<div class="hide">
							<div class="introductionMain">
								{foreach name="social" item="v"}
								<div class="introductionMainBox">
									<div class="introductionImg">
										<img src="{$v.image}" alt="">
									</div>

									<div class="intromationText">
										<p>{$v.title}</p>
										<p>⌚{$v.createtime}</p>
									</div>
								</div>
								{/foreach}
							</div>
						</div>

						<!-- 文字列表 -->
						<div class="listText">
							<ul class="listContent">
								{foreach name="social" item="v"}
								<li>
									<div class="listTextmain"><span></span>{$v.title}</div>
									<div class="listTextTime">{$v.createtime}</div>
								</li>
								{/foreach}
							</ul>
						</div>










						<div class="lookMore">
							<a href="#">查看更多></a>
						</div>
					</div>
				</div>
			</div>

			<div class="footer">
				<div class="main">
					<div class="footLogo">
						<img src="/static/index/img/logo_white.png" alt="">
					</div>
					<div class="footDetails">
						<div class="footText">
							<p>办公室</p>
							<p>|</p>
							<p>0539-5916215</p>
						</div>
						<div class="footText">
							<p>招生资讯</p>
							<p>|</p>
							<p>0539-5916215</p>
						</div>
						<div class="footText">
							<p>官网</p>
							<p>|</p>
							<p>www.sdcc.edu.cn</p>
						</div>
						<div class="footText">
							<p>邮箱</p>
							<p>|</p>
							<p>sdccxy@126.com</p>
						</div>
						<div class="footText">
							<p>校址</p>
							<p>|</p>
							<p>山东省烟台市高新区海天路1001号</p>
						</div>
					</div>
					<div class="footContack" id="weCat">
						<div class="wecat">
							<img src="/static/index/img/weCat.png" id="weCat" alt="">
							<p>官方微信</p>
						</div>
						<div class="microvlog" id="vlog">
							<img src="/static/index/img/weibo.png" id="vlog" alt="">
							<p>官方微博</p>
						</div>
					</div>
				</div>
				<div class="stop">
					Copyright O山东省城市服务技师学院版权所有
				</div>
			</div>
		</div>
	</body>
	<img src="" alt="">
	<script>
		$(document).ready(function() {
			$('#listCard').click(function() {
				var listCard = $(this).parent('.clover').siblings('.show')
				var listPictrue = $(this).parent('.clover').siblings('.hide')
				var listText = $(this).parent('.clover').siblings('.listText')

				var activeSE = $(this).siblings('#listPictrue')
				var activeTh = $(this).siblings('#listText')
				if (listCard.show()) {
					$(this).attr('src','/static/index/img/firstXuanzhong.png')
					activeSE.attr('src','/static/index/img/secondWeixuanzhpng.png')
					activeTh.attr('src','/static/index/img/thirdWeixuanzhong.png')

					listPictrue.hide()
					listText.hide()
				}
				// else {

				// }
			})

			$('#listPictrue').click(function() {
				var listCard = $(this).parent('.clover').siblings('.show')
				var listPictrue = $(this).parent('.clover').siblings('.hide')
				var listText = $(this).parent('.clover').siblings('.listText')

				var activeFi = $(this).siblings('#listCard')
				var activeTh = $(this).siblings('#listText')
				if (listPictrue.show()) {
					activeFi.attr('src','/static/index/img/firstWeixuanz.png')
					$(this).attr('src','/static/index/img/secondXuanzhong.png')
					activeTh.attr('src','/static/index/img/thirdWeixuanzhong.png')

					listCard.hide()
					listText.hide()
				}
				//  else {
				// 	listCard.show()
				// }
			})
			// listText
			$('#listText').click(function() {
				var listCard = $(this).parent('.clover').siblings('.show')
				var listPictrue = $(this).parent('.clover').siblings('.hide')
				var listText = $(this).parent('.clover').siblings('.listText')

				var activeFi = $(this).siblings('#listCard')
				var activeSE = $(this).siblings('#listPictrue')
				if (listText.show()) {
					$(this).attr('src','/static/index/img/thirdXuanzhong.png')
					activeFi.attr('src','/static/index/img/firstWeixuanz.png')
					activeSE.attr('src','/static/index/img/secondWeixuanzhpng.png')

					listCard.hide()
					listPictrue.hide()
				}
				// else {
				// 	listCard.show()
				// }
			})
		})

		// $(document).ready(function() {
		// 	$('#listPictrue').click(function() {
		// 		var listPictrue = $(this).parent('.clover').siblings('.hide')
		// 		if (listPictrue.is(':visible')) {
		// 			// 如果元素当前是可见状态，则隐藏它
		// 			listPictrue.slideUp();
		// 		} else {
		// 			// 如果元素当前是隐藏状态，则显示它
		// 			listPictrue.slideDown();
		// 		}
		// 	})
		// })

		// 移动端显示及隐藏导航栏
		// $(function() {
		// 	// 绑定按钮点击事件
		// 	$('#more').click(function() {
		// 		// 获取 div 元素
		// 		var more = $(this).siblings("ul");

		// 		if (more.is(':visible')) {
		// 			// 如果元素当前是可见状态，则隐藏它
		// 			more.slideUp();
		// 		} else {
		// 			// 如果元素当前是隐藏状态，则显示它
		// 			more.slideDown();
		// 		}
		// 	});
		// });



		// 轮播图开始
		var mySwiper = new Swiper('.swiper', {
			autoplay: {
				delay: 3000,
				stopOnLastSlide: false,
				disableOnInteraction: false,
			},
			effect: 'slide', //图片切换方式淡入
			loop: true, // 循环模式选项
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true, //点击分页器指示点可以切换banner图
			},
			// 如果需要前进后退按钮
			navigation: {
				clickable: true,
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		})
		// 轮播图结束
		$(document).ready(function() {
			$(".holdLeft").hover(function() {
				$(this).find(".overlay").css({
					display: "block"
				})
			}, function() {
				$(this).find(".overlay").css({
					display: "none"
				})
			})
		})

		$('.overlayNext').hide(); // 隐藏样式
		$(document).ready(function() {
			$(".societyContent").hover(function() {
				$(this).find(".overlayNext").css({
					display: "flex"
				})
			}, function() {
				$(this).find(".overlayNext").css({
					display: "none"
				})
			})
		})
		AOS.init({
			duration: 1200,
		})
		//显示隐藏微信和微博
		// $(document).ready(function() {
		//   $('.box').hover(
		//     function() {
		//       $(this).find('img').show();
		//     },
		//     function() {
		//       $(this).find('img').hide();
		//     }
		//   );
		// });
	</script>
</html>